<script lang="ts" setup>
import IconPark from '@/components/icon-park/IconPark.vue'
import { Like, PlayTwo, Add } from '@icon-park/vue-next'
import type { Song } from '@/types/artist/index'
import { useFormat } from '@/hooks/useFormat'
import { useRouter } from 'vue-router'
import { toRefs } from 'vue'
import { usePlayerStore } from '@/stores/player'

const { addPlayList } = toRefs(usePlayerStore())

const router = useRouter()

defineProps<{
  info: Song
}>()

const { formatTimeStamp } = useFormat()

const toAlbum = (id: number) => {
  router.push({
    name: 'album',
    query: { id },
  })
}
</script>

<template>
  <div class="text-xs flex hover:bg-slate-200 py-3 px-2 item">
    <div class="flex-auto flex items-center justify-between pr-5">
      <div class="flex">
        <div class="cursor-pointer">{{ info.name }}</div>
        <IconPark v-if="info.mv > 0" class="ml-2 text-orange-400 cursor-pointer" size="16" title="mv" :icon="PlayTwo" />
      </div>
      <div class="icon-action hidden text-gray-400">
        <div class="flex">
          <IconPark title="添加到" class="icon-hover" :icon="Add" size="14" @click="addPlayList(info.id)" />
          <IconPark title="喜欢" class="ml-2 icon-hover" :icon="Like" size="14" />
        </div>
      </div>
    </div>
    <div class="w-1/3 cursor-pointer icon-hover" @click="toAlbum(info.al.id)">{{ info.al.name }}</div>
    <div class="w-20">{{ formatTimeStamp(info.dt) }}</div>
  </div>
</template>

<style lang="less" scoped>
.item {
  &:hover {
    .icon-action {
      @apply block;
    }
  }
}
</style>
